<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="msgBoxs" style="width: 500px;height: 300px;white-space: pre"></div>
<br>
待发送消息：<input type="text" id="msg" onkeydown="send(event)">
<input type="button" id="sendBtn" onclick="send()" value="发送">
<script type="application/javascript">
    const msgBoxs = document.getElementById("msgBoxs")
    const msgBox = document.getElementById("msg")
    document.cookie="token2=John Doe";
    const ws = new WebSocket("ws://localhost:8080/hello?token=aabb123&demo=1&userType=1&toUser=0")
    ws.onopen = function (evt) {
        console.log("Connection open ...");
        ws.send("Hello WebSocket Second!");
    }

    ws.onmessage = function (evt) {
        console.log("Received Message: ", evt.data)
        // const msgs = msgBoxs.value
        // msgBoxs.innerText = "\n" + msgs + "\n" + evt.data
        // msgBoxs.scrollTop = msgBoxs.scrollHeight;
        msgBoxs.append(`${evt.data}\n`)
    }

    ws.onclose = function (evt) {
        console.log("Connect closed.");
    }

    function send(event) {
        if (event && event.keyCode != 13) {
            return;
        }
        if (msgBox.value.length === 0) return;
        const msg = msgBox.value
        ws.send(msg)
        msgBox.value = ""
    }
</script>
</body>
</html>